<template>
  <view class="container">
    <view class="search">
      <image src="../../static/icon/grarysearch.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-left: 30rpx"></image>
      <input type="text" placeholder="搜索地址/区域" class="ipt" v-model="keywords" @input="getsuggest" />
    </view>
    <view
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 690rpx;
        margin: 20rpx 30rpx;
        border-bottom: 2rpx solid #f1f1f1;
        padding: 20rpx;
      "
    >
      <view class="left">
        <view style="display: flex; align-items: center">
          <image src="../../static/icon/position.png" mode="aspectFill" style="width: 36rpx; height: 34rpx"></image>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #333333">当前位置</view>
        </view>
        <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #333333">{{ address }}</view>
      </view>
      <view class="right" @click="reloaction">
        <image src="../../static/icon/sxdw.png" mode="aspectFill" style="width: 30rpx; height: 30rpx; vertical-align: middle; margin-right: 10rpx"></image>
        <text style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #333333">刷新定位</text>
      </view>
    </view>
    <!-- 联想地址列表 -->
    <view class="list" v-if="suggestlist.length != 0" v-for="(item, index) in suggestlist" :key="item.id" @click="changeaddress(item)">{{ item.address }}</view>
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
export default {
  data() {
    return {
      address: '',
      keywords: '',
      city: '',
      suggestlist: []
    };
  },
  methods: {
    // 刷新位置
    reloaction() {
      // uni.chooseLocation({
      //   success: (res) => {
      //     console.log(res);
      //   }
      // });
      uni.getLocation({
        success: (res) => {
          let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`;
          this.$jsonp(url, {
            key: '5ZKBZ-M5CCV-M4EP2-5JRNX-KCZBQ-MCFA4',
            location: res.latitude + ',' + res.longitude,
            output: 'jsonp'
          }).then((res) => {
            this.address = res.result.address;
            this.city = res.result.address_component.city;
          });
          // qqmap.reverseGeocoder({
          //   location: {
          //     latitude: res.latitude,
          //     longitude: res.longitude
          //   },
          //   success: (res) => {
          //     console.log('地址已解析后的位置', res);
          //     this.address = res.result.address;
          //     this.city = res.result.address_component.city;
          //   }
          // });
        }
      });
    },
    // 获取输入的位置建议
    getsuggest() {
      if (this.keywords == '') {
        this.suggestlist = [];
      }
      let url = `https://apis.map.qq.com/ws/place/v1/suggestion`;
      this.$jsonp(url, {
        key: '5ZKBZ-M5CCV-M4EP2-5JRNX-KCZBQ-MCFA4',
        keyword: this.keywords,
        region: this.city,
        region_fix: 1,
        output: 'jsonp'
      }).then((res) => {
        console.log('地址联想-----', res);
        this.suggestlist = res.data;
      });
      // qqmap.getSuggestion({
      //   keyword: this.keywords,
      //   region: this.city,
      //   region_fix: 1,
      //   success: (res) => {
      //     console.log('地址联想-----', res);
      //     this.suggestlist = res.data;
      //   }
      // });
    },
    // 切换当前的位置
    changeaddress(item) {
      this.address = item.address;
    }
  },
  onLoad() {
    this.reloaction();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .search {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 690rpx;
    height: 80rpx;
    margin: 20rpx 30rpx;
    background: #fafafa;
    border-radius: 100rpx;
    .ipt {
      box-sizing: border-box;
      flex: 1;
      padding-left: 20rpx;
    }
  }
  .list {
    box-sizing: border-box;
    width: 690rpx;
    padding: 20rpx;
    font-size: 26rpx;
    margin: 20rpx;
    border-bottom: 4rpx solid #ccc;
    margin-top: 30rpx;
  }
}
</style>
